﻿@page "/RadioGroup"

@using FluentUI.Demo.Shared.Pages.RadioGroup.Examples

<PageTitle>@App.PageTitle("RadioGroup")</PageTitle>

<h1>Radio Group</h1>

<p>As defined by the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/radio/" target="_blank" rel="noopener noreferrer">W3C</a>:</p>
<blockquote>
    <p>
        A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked
        at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one
        of the buttons before moving past a certain point in the workflow.
    </p>
</blockquote>

<p>
    While any DOM content is permissible as a child of the radiogroup, only <code>&lt;FluentRadio&gt;</code>'s and slotted content with a role of
    <code>radio</code> will receive keyboard support.
</p>

<p>
    <code>&lt;FluentRadioGroup&gt;</code> wraps the <code>&lt;fluent-radio-group&gt;</code> element, a web component implementation of a radio group leveraging the
    Fluent UI design system.
</p>

<h2 id="example">Examples</h2>

<DemoSection Title="Default" Component="@typeof(RadioGroupDefault)"></DemoSection>

<DemoSection Title="In a toolbar" Component="@typeof(RadioGroupToolbar)"></DemoSection>

<DemoSection Title="States" Component="@typeof(RadioGroupStates)"></DemoSection>

<DemoSection Title="Label outside group" Component="@typeof(RadioGroupLabelOutside)"></DemoSection>

<DemoSection Title="With preset" Component="@typeof(RadioGroupPreset)"></DemoSection>

<h2 id="documentation">Documentation</h2>

<ApiDocumentation Component="typeof(FluentRadioGroup<>)" InstanceTypes="@(new[] {typeof(string)})" GenericLabel="TValue">
    <Description>
        <blockquote><strong>Note:</strong> Although the component is generic, it only supports simple types like <code>int</code>, <code>string</code> and <code>bool</code>.</blockquote>
    </Description>
</ApiDocumentation>
